<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Bootstrap学习</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/select2.css">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/select2.full.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/pagejs/select2.js"></script>

</head>
<body>
<div class="page-content">
    <div class="page-body">
<div class="container">
    <div class="col-lg-6">
        <span>Bootstrap</span>
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <div class="widget">
                    <div class="widget-header bg-blue">
                        <span class="widget-caption">面包削导航</span>
                        <div class="widget-buttons">
                            <a href="#" data-toggle="maximize"> <i
                                    class="fa fa-expand"></i>
                            </a> <a href="#" data-toggle="collapse"> <i
                                class="fa fa-minus"></i>
                        </a>
                        </div>
                    </div>
                    <div class="widget-body">
                        <div class="row" style="margin-left: 5px; margin-right: 5px">
                        <ol class="breadcrumb">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">2017</a></li>
                            <li class="active"><a href="#">九月</a></li>
                        </ol>

                            <br>

                            <div class="bg-info">
                                <span>分页</span>
                                <ul class="pagination">
                                    <li><a href="#">&laquo;</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">&raquo;</a></li>
                                </ul>

                                <span>分页状态</span>
                                <ul class="pagination">
                                    <li><a href="#">&laquo;</a></li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li class="disabled"><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">&raquo;</a></li>
                                </ul>

                                <span>翻页</span>
                                <ul class="pager">
                                    <li><a href="#">Previous</a></li>
                                    <li><a href="#">Next</a></li>
                                </ul>

                                <span>对齐链接</span>
                                <ul class="pager">
                                    <li class="previous"><a href="#">&larr; Older</a></li>
                                    <li class="next"><a href="#">Newer &rarr;</a></li>
                                </ul>

                                <ul class="pager">
                                    <li class="previous disabled"><a href="#">&larr; 前一页</a></li>
                                    <li class="next"><a href="#">后一页 &rarr;</a></li>
                                </ul>
                            </div>

                            <div>
                                <span>标签</span>
                                <span class="label label-default">默认标签</span>
                                <span class="label label-primary">主要标签</span>
                                <span class="label label-success">成功标签</span>
                                <span class="label label-info">信息标签</span>
                                <span class="label label-warning">警告标签</span>
                                <span class="label label-danger">危险标签</span>
                                <br>
                                <span>徽章</span>
                                <a href="#">Mail <span class="badge">50</span></a>
                                <br>
                                <h2>徽章</h2>
                                <p>.badge 类指定未读消息的数量:</p>
                                <p><a href="#">收件箱 <span class="badge">21</span></a></p>
                                <h3>胶囊式导航中的激活状态</h3>
                                <ul class="nav nav-pills">
                                    <li class="active">
                                        <a href="#">
                                            首页<span class="badge">10</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">简介</a>
                                    </li>
                                    <li>
                                        <a href="#">消息
                                            <span class="badge">2</span>
                                        </a>
                                    </li>
                                </ul>
                                <h3>列表导航中的激活状态</h3>
                                <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
                                    <li class="active">
                                        <a href="#">
                                            <span class="badge pull-right">42</span>首页
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">简介</a>
                                    </li>
                                    <li>
                                       <a href="#">
                                           <span class="badge pull-right">3</span>消息
                                       </a>
                                    </li>
                                </ul>
                            </div>




                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <div class="col-lg-6 bg-info">

       
        <div class="page-header col-lg-6">
            <h1>页面标题</h1>
            <h1>页面标题
                <small>页面子标题</small>
            </h1>
        </div>
        


    </div>
    <div class="container">
        <div class="jumbotron">
            <h1>欢迎页面</h1>
            <p>这是一个超大屏幕（jumbotron）的实例。</p>
            <p class="btn btn-primary btn-lg" role="button">登录</p>
        </div>



    </div>

</div>
</div>
</div>
<div class="col-lg-6">
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/img/1.png" alt="通用占位符缩略图">
            </a>
        </div>
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/img/2.png" alt="通用占位符缩略图">
            </a>
        </div>
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/img/3.png" alt="通用占位符缩略图">
            </a>
        </div>
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/img/4.png" alt="通用占位符缩略图">
            </a>
        </div>

    </div>
</div>
</div>
</body>
</html>